/* 
 * @Author: Marte
 * @Date:   2017-05-17 11:53:41
 * @Last Modified by:   Marte
 * @Last Modified time: 2017-05-18 14:17:41
 */
 
var audio,t;
var data =  {
        "list": [
            {
                "audioStatus": null,
                "audioUrl": null,
                "createDate": 1492163386000,
                "id": 18,
                "img": "http://116.62.71.117:8080/files/upload/images/2017/4/14932841331110.png",
                "name": "活捉蟋蟀巡逻兵01",
                "orderId": 1,
                "ostTime": 15,
                "ostUrl": "http://116.62.71.117:8080/files/upload/audios/2017/4/14932839126850.mp3",
                "playTime": null,
                "subtitle": "吃得精光！”老鼠叫了起来，“这个名字太令人费解了！我从来没有在书上见过。吃得精光！这是什么意思呢？”它摇摇头，蜷缩起身子，躺下睡着了。",
                "templateId": 2,
                "type": 1,
                "updateDate": 1494999701000
            },
            {
                "audioStatus": null,
                "audioUrl": null,
                "createDate": 1492163386000,
                "id": 22,
                "img": "http://116.62.71.117:8080/files/upload/images/2017/4/14932841331110.png",
                "name": "活捉蟋蟀巡逻兵02",
                "orderId": 2,
                "ostTime": 15,
                "ostUrl": "http://116.62.71.117:8080/files/upload/audios/2017/4/14932839126850.mp3",
                "playTime": null,
                "subtitle": "好心的老鼠同意了。",
                "templateId": 2,
                "type": 1,
                "updateDate": 1494999701000
            },
            {
                "audioStatus": null,
                "audioUrl": null,
                "createDate": 1492163386000,
                "id": 23,
                "img": "http://116.62.71.117:8080/files/upload/images/2017/4/14932841331110.png",
                "name": "活捉蟋蟀巡逻兵03",
                "orderId": 3,
                "ostTime": 15,
                "ostUrl": "http://116.62.71.117:8080/files/upload/audios/2017/4/14932839126850.mp3",
                "playTime": null,
                "subtitle": "它吃得饱饱的，直到天黑了才挺着圆圆的肚子回家。老鼠看到它回来，立刻问它这第三个孩子起的什么名字。",
                "templateId": 2,
                "type": 1,
                "updateDate": 1494999701000
            },
            {
                "audioStatus": null,
                "audioUrl": null,
                "createDate": 1492163386000,
                "id": 24,
                "img": "http://116.62.71.117:8080/files/upload/images/2017/4/14932841331110.png",
                "name": "活捉蟋蟀巡逻兵04",
                "orderId": 3,
                "ostTime": 15,
                "ostUrl": "http://116.62.71.117:8080/files/upload/audios/2017/4/14932839126850.mp3",
                "playTime": null,
                "subtitle": "它吃得饱饱的，直到天黑了才挺着圆圆的肚子回家。老鼠看到它回来，立刻问它这第三个孩子起的什么名字。",
                "templateId": 2,
                "type": 1,
                "updateDate": 1494999701000
            }
        ]
    }
$(function() {
    
    $.ajax({
         type: 'GET',
         url: "http://116.62.71.117:8080/xlb/api/audio/audioPage/share/1",
         async: false,
         dataType: "jsonp",
         jsonp: "callback",
         success: function(result){
                alert(1);
         },
         timeout:3000 
      });

    document.title=data.list[0].name; 
    $('#yemaAll').html(data.list.length);

    for (var i = 0; i < data.list.length; i++) {
        let option = '<IMG alt=' + data.list[i].subtitle + ' src=' + data.list[i].img + '>'
        $('#imgsrc').append(option);
    }
    //音频播放
    audio = document.createElement("audio");
    audio.src = data.list[kI].ostUrl;
    audio.play();
    t = setInterval(function() {
        if (audio.paused) {
            if (audio.currentTime >= data.list[kI].ostTime) {
                TPR();
            }
        }
    }, 1000);
    //控制
    $('.play').on('click', function(event) {
        if (audio.paused) {
            audio.play();
            $(this).addClass('active');
        }else{
            audio.pause();
            $(this).removeClass('active');
        }
    });


    IMGSRC = document.getElementById("imgsrc").getElementsByTagName("img");
    DB = document.getElementById("DHTMLBOOK");
    P01 = DB.getElementsByTagName("span")[0];
    P01i = P01.getElementsByTagName("img")[0];
    P02 = DB.getElementsByTagName("span")[1];
    P02i = P02.getElementsByTagName("img")[0];
    P1 = DB.getElementsByTagName("span")[2];
    P1i = P1.getElementsByTagName("img")[0];
    P2 = DB.getElementsByTagName("span")[3];
    P2i = P2.getElementsByTagName("img")[0];
    nI = IMGSRC.length;
    P1i.src = IMGSRC[kI].src;
    P2i.src = IMGSRC[kI].src;
    titLe(kI);
    DB.style.visibility = "visible";

    $(".key").animate({
        left: 1 / nI * 100 + '%'
    }, 500);

})

document.onselectstart = function() {
    return false;
}

var nI = 0;
var kI = 0;
var run = false;

function setOpacity(obj, o) {
    if (o < 0) o = 0;
    else if (o > 100) o = 100;
    if (obj.filters) obj.filters.alpha.opacity = o;
    else obj.style.opacity = o / 100;
}

function TPR__(p) {
    P1.style.left = 50 - (2.5 * p) + "%";
    P1.style.width = (2.5 * p) + "%";
    setOpacity(P1i, .5 * p * p);
    if (p == 20) run = false;
}

function TPR_(p) {
    P2.style.width = 50 - (2.5 * p) + "%";
    setOpacity(P2i, 100 - .5 * (p * p));
    if (p == 20) {
        P2i.src = IMGSRC[kI].src;
        setOpacity(P2i, 100);
        P2.style.width = "50%";
        for (var i = 1; i <= 20; i++) setTimeout("TPR__(" + i + ")", i * 32);
    }
}

function TPR() {
    if (!run) {
        run = true;
        P01i.src = IMGSRC[kI].src;
        P1.style.width = 0;
        kI++;
        if (kI >= nI) {
            kI = nI;
            $('.tanceng-download').show();
            audio.pause();
            clearInterval(t);
        } else {
            //播放
            $("#yema").html(kI + 1);
            $(".key").animate({
                left: (kI + 1) / nI * 100 + '%'
            }, 500);
            $('.play').addClass('active');
            audio.src = data.list[kI].ostUrl;
            audio.play();
            document.title=data.list[kI].name; 

            titLe(kI);
            P02i.src = IMGSRC[kI].src;
            P1i.src = IMGSRC[kI].src;
            for (var i = 1; i <= 20; i++) setTimeout("TPR_(" + i + ")", i * 32);
        }

    } else setTimeout("TPR()", 100);
}

function TPL__(p) {
    P2.style.width = (2.5 * p) + "%";
    setOpacity(P2i, .5 * p * p);
    if (p == 20) run = false;
}

function TPL_(p) {
    P1.style.left = (2.5 * p) + "%";
    P1.style.width = 40 + (10 - 2.5 * p) + "%";
    setOpacity(P1i, 100 - .5 * (p * p));
    if (p == 20) {
        P1i.src = IMGSRC[kI].src;
        setOpacity(P1i, 100);
        P1.style.left = 0;
        P1.style.width = "50%";
        for (var i = 1; i <= 20; i++) setTimeout("TPL__(" + i + ")", i * 32);
    }
}

function TPL() {
    if (!run) {
        run = true;
        P02i.src = IMGSRC[kI].src;
        P2.style.width = 0;
        kI--;
        if (kI < 0) {
            kI = 0;
            alert("这就是第一页啊")
        }
        //播放
        $("#yema").html(kI + 1);
        $(".key").animate({
            left: (kI + 1) / nI * 100 + '%'
        }, 500);
        audio.src = data.list[kI].ostUrl;
        audio.play();

        titLe(kI);
        P01i.src = IMGSRC[kI].src;
        P2i.src = IMGSRC[kI].src;
        for (var i = 1; i <= 20; i++) setTimeout("TPL_(" + i + ")", i * 32);
    } else setTimeout("TPL()", 100);
}

function titLe(p) {
    document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;
}